<template>
  <div class="hospital-home">
    <!-- 左边导航部分 -->
    <div class="common-header">
      <div class="title-wrapper">
        <span>中国人民解放军总医院(301医院)</span>
      </div>
      <div class="icon-wrapper">
        <span class="iconfont"></span>        
        三级甲等
      </div>
    </div>
    <!-- 右边start -->
    <div class="info-wrapper">
      <img width="80px" height="80px" src="../../assets/hos_detail.png" alt="">
      <div class="content-wrapper">
        <div class="sub-title">挂号规则</div>
        <div class="line">
          <div>
            <span class="label">预约周期:</span>
            <span>28天</span>
          </div>
          <div class="space">
            <span class="label">放号时间：</span>
            <span>28天</span>
          </div>
          <div class="space">
            <span class="label">停挂时间：</span>
            <span>28天</span>
          </div>
        </div>
        <div class="line">
          <span class="label">退号时间:</span>
          <span>就诊前一日15:00前取消</span>
        </div>
        <div class="sub-title rules">医院预约规则</div>
        <div class="rule-wrapper">
          <p>
            <span class="red">1：受疫情影响，来自或去过中/高地区的患者就诊须持北京市7日内正规机构核酸检测阴性结果证明，否则将不能正常就诊，请主动配合入口处管理和预检分诊。
            </span><br/>
            <span class="red">2：为减少院内聚集，避免交叉感染风险，每位患者仅允许一位家属陪同。</span><br/>
          <span>3. 首次预约患者,预约时必须填写“亲属姓名”用于建档备查，首次填写后无需再填写。</span><br/>
          <span>4. 预约成功的医保报销用户请首先确保为本院定点医保用户，首次来院就诊时需到窗口关联医保卡后，再到医院医保自助机取号就诊。预约成功的自费用户请在非医保自助机取号就医。</span><br/>
          <span>5. 使用身份证以外其它证件注册预约的患者，只能到窗口取号。</span><br/>
          <span>6. 本院【小儿科】只预约小于14周岁(不包含14周岁)的患儿。</span><br/>
          <span>7. 预约成功后，请患者于就诊当日携带患者本人的有效证件、银行卡、医保卡、及预约识别码到医院自助挂号机上进行取号（医保报销用户须在医保自助机取号，在非医保自助机取号为自费），如预约登记信息有误，则无法正常取号就诊。</span><br/>
          <span>8. 本院【口腔科】下的小儿牙科只对12周岁以下患儿预约</span><br/>
          </p>
        </div>
      </div>
    </div>
    <!-- 科室 -->
    <div class="select-title title">选择科室</div>
    <div class="select-dept-wrapper">
      <div class="dept-wrapper">
        <div class="hospital-dept">
          <div class="dept-list">
            <div class="el-scrollbar_view">
              <div class="sub-item" :class="{selected:true}">肝胆胰外科医学部</div>
              <div class="sub-item">内科</div>
              <div class="sub-item">口腔科</div>
              <div class="sub-item">内科</div>
              <div class="sub-item">外科</div>
              <div class="sub-item">皮肤科</div>
            </div>
          </div>
        </div>
      </div>
      <div class="sub-dept-container">
        <div class="sub-dept-wrapper" :class="{selected:true}">
          <div class="sub-title" :class="{selected:true}">
            <div class="block" :class="{selected:true}"></div>
            <div class="title">肝脏门诊部</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
        <div class="sub-dept-wrapper">
          <div class="sub-title">            
            <div class="block"></div>
            <div class="title">内科</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
        <div class="sub-dept-wrapper">
          <div class="sub-title">            
            <div class="block"></div>
            <div class="title">口腔科</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
        <div class="sub-dept-wrapper">
          <div class="sub-title">            
            <div class="block"></div>
            <div class="title">疼痛科</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
        <div class="sub-dept-wrapper">
          <div class="sub-title">            
            <div class="block"></div>
            <div class="title">疼痛科</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
        <div class="sub-dept-wrapper">
          <div class="sub-title">            
            <div class="block"></div>
            <div class="title">疼痛科</div>
          </div>
          <div class="sub-item-wrapper">
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
            <div class="sub-item"><span>肝移植门诊</span></div>
          </div>
        </div>
      </div>
    </div>
    <!-- -------回到顶部 -->
    <el-backtop></el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.hospital-home {
  .common-header {
    display: flex;
    .title-wrapper {
      font-size: 20px;
      margin-right: 15px;
      color: #333;
      span {        
        font-weight: 700;
      }
    }
    .icon-wrapper {
      font-size: 14px;
      display: flex;
      line-height: 26px;
      color: #999999;
    }
  }
  .info-wrapper {
    display: flex;
    margin-top: 30px;
    font-size: 12px;
    color: #999999;
    img {
      flex: 0 0 80px;
    }
    .content-wrapper {
      flex: 1;
      border: 1px solid blue;
      margin-left: 30px;
      .sub-title {
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 19px;
        color: #333333;
        &.rules {
          margin-top: 20px;
        }
      }
      .line {
        margin-top: 8px;
        display: flex;
        .space {
          margin-left: 60px;
        }
      }
      .rule-wrapper {
        margin-top: 8px;
        p {
          line-height: 20px;
          span {
            &.red {
              color: red;
              display: inline-block;
            }
          }
        }
      }
    }
  }
  .select-title {
    padding-top: 40px;
    padding-bottom: 20px;
    position: sticky;
    top: 0;
    &.title {
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 16px;
      color: #333;
    }
  }
  .select-dept-wrapper {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 100px;
    border: 1px solid green;
    position: sticky;
    top: 0px;
    box-sizing: border-box;
    .dept-wrapper {
      flex: 0 0 170px;
      background: #f4f9ff;
      padding: 10px 0;      
      max-height: 440px;
      position: sticky;
      top: 82px;
      .hospital-dept {
        width: 100%;
        .dept-list {
          width: 100%;
          text-align: center;
          .el-scrollbar_view {
            width: 100%;
            .sub-item {
              width:100%;
              height: 40px;
              line-height: 40px;
              // border: 1px solid red;
              &.selected {
                width: 100%;
                font-size: 16px;
                font-weight: 700;
                background-color: #ffffff;
              }
            }
          }
        }
      }
    }
    .sub-dept-container {
      // height: 100%;
      flex: 1;
      // -webkit-box-flex: 1;
      margin-left: 50px;
      border: 1px solid orange;
      overflow-x: auto;
      overflow-y: hidden;
      min-width: 1200px;
      box-sizing: border-box;
      font-size: 14px;
      .sub-dept-wrapper{
        padding: 20px 0px 20px 30px;
        border-radius: 4px;
        margin-top: 20px;
        &:first-child {
          margin-top: 0px;
        }
        &.selected {          
          background: #fafafa;
        }        
        @mixin block {
          height: 14px;
          border-radius: 2px;
          background: #4990f1;
          margin-right: 6px;
        }  
        .sub-title {
          display: flex;  
          -webkit-box-align: center;
          vertical-align: baseline;        
          .title {
            height: 14px;
            font-size: 14px;
            color: #333333;
            font-weight: 700;
            line-height: 14px;
          }
          .block {
            width: 2px;
            @include block();
            &.selected {
              width: 4px;
            }
          }
        }
        .sub-item-wrapper {
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          color: #666;
          letter-spacing: 1px;
          .sub-item {
            width: 200px;
            margin-top: 10px;
            padding-right: 30px;
            cursor: pointer;
            span {
              transition: all .2s ease;
            }
          }
        }
      }
    } 
  }
  
}
</style>
